<template>
  <div style="">
    <div class="class-header">
      <div class="class-background">
        <img src="../../../assets/images/student/confirm-order-bg.png" style="width: 100%">
        <div class="class-introduction">
          <div class="class-title">
            支付中心
          </div>
          <div class="tutor-info">
            <Card style="width:100%">
              <div style="text-align:left">
                <h3>订单：{{orderIdDisplay}}</h3>
                <Row style="margin-top: 15px;margin-bottom: 15px;">
                  <i-col span="5">
                    <img class="goods-img" :src="goodsImage"/>
                  </i-col>
                  <i-col span="15">
                    <h3>{{goodsName}}</h3>
                  </i-col>
                  <i-col span="4">
                    <h3 style="color: #e13d13">实付金额：￥{{goodsPrice}}</h3>
                  </i-col>
                </Row>
                <hr>
                <h3>支付方式</h3>
                <div class="pay-method">
                  <div @click="alipaySelected" class="pay-method-border alipay active" ref="alipay">
                    <div class="check" ref="alipay_selected">
                      <div class="triangle">
                        <Icon type="md-checkmark" class="icon-check"/>
                      </div>
                    </div>
                  </div>
                  <div @click="weixinSelected" class="pay-method-border weixin" ref="weixin">
                    <div class="check" ref="weixin_selected">
                      <div class="triangle">
                        <Icon type="md-checkmark" class="icon-check"/>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="margin-top: 15px;text-align: right;line-height: 28px;">
                  <div>
                    <span style="font-size: 18px;">应付</span>
                    <span style="font-size: 18px;color: #e13d13;font-weight: bold;">￥{{goodsPrice}}</span>
                  </div>
                  <div style="margin-top: 15px;">
                    <Button type="error" :disabled="payDisabled" @click="payAction" style="font-size: 18px;width: 180px;">{{payText}}</Button>
                  </div>
                </div>
              </div>
            </Card>
            <Modal v-model="weixinQRPay" width="400" footer-hide>
              <div class="wx-pay-modal-header">微信支付：{{goodsPrice}}</div>
              <canvas id="msg"></canvas>
              <div class="wx-pay-modal-footer">使用微信扫描二维码进行支付</div>
            </Modal>
            <Modal
              title="支付成功"
              v-model="success"
              @on-ok="paySuccess"
              :styles="{top: '20px'}">
              <p>您已支付成功，点击右上角个人中心查看已购买的课程</p>
            </Modal>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'
export default {
  name: 'index',
  data () {
    return {
      orderId: '',
      orderIdDisplay: '',
      goodsImage: '',
      goodsName: '',
      goodsPrice: '',
      weixinQRPay: false,
      display: true,
      payMethod: '0',
      payUrl: '',
      payDisabled: false,
      payText: '立即支付',
      success: false
    }
  },
  methods: {
    getOrderDetail () {
      let url = '/api/order/findByOrderId'
      let params = this.$qs.stringify({
        orderId: this.orderId
      })
      this.$post(url, params).then((res) => {
        if (res.code === 0) {
          this.orderIdDisplay = res.data.order.orderId
          this.goodsImage = res.data.sysCourse.handcover
          this.goodsName = res.data.sysCourse.courseName
          this.goodsPrice = res.data.sysCourse.price
        }
      })
    },
    alipaySelected () {
      this.$refs.alipay.style.border = '2px solid #db2516'
      this.$refs.weixin.style.border = '2px solid #f3f5f7'
      this.$refs.alipay_selected.style.display = 'inline'
      this.$refs.weixin_selected.style.display = 'none'
      this.payMethod = '0'
    },
    weixinSelected () {
      this.$refs.weixin.style.border = '2px solid #db2516'
      this.$refs.alipay.style.border = '2px solid #f3f5f7'
      this.$refs.alipay_selected.style.display = 'none'
      this.$refs.weixin_selected.style.display = 'inline'
      this.payMethod = '1'
    },
    payAction () {
      if (this.payMethod === '0') {
        this.$Message.info('尚未开通支付宝支付！')
      }
      if (this.payMethod === '1') {
        let url = '/api/pay/createOrder'
        let params = {
          outTradeNo: this.orderId
        }
        this.$post(url, params).then((res) => {
          this.payUrl = res.codeUrl
          let val = this.payUrl
          var msg = document.getElementById('msg')
          let config = {
            width: '360'
          }
          QRCode.toCanvas(msg, val, config, function (error) {
            console.log(error)
          })
          this.weixinQRPay = true
          this.checkPayStatus()
        })
      }
    },
    checkPayStatus() {
      this.$get('/api/pay/queryOrder', {outTradeNo: this.orderId}).then((res) => {
        if (res.data === '支付成功') {
          this.weixinQRPay = false
          this.payDisabled = true
          this.payText = '支付成功'
          this.success = true
        }
      })
    },
    paySuccess() {
      this.success = false
    }
  },
  mounted () {
    this.orderId = this.$route.query.orderId
    this.weixinSelected()
    this.getOrderDetail()
  }
}
</script>

<style scoped>
  .class-background {
    position: relative;
  }
  .class-introduction {
    position: absolute;
    top: 20px;
    width: 100%;
    padding: 0 5%;
  }
  .class-title {
    margin-top: 1.5rem;
    font-size: 2rem;
  }
  .tutor-info {
    margin-top: 1.5rem;
  }
  .goods-img{
    width: 300px;
    height: 200px;
  }
  .tutor-avatar {
    border-radius: 50%;
    width: 50px;
    float: left;
  }
  .tutor-name {
    margin-left: 70px;
  }
  .name-info {
    font-size: 16px;
    font-weight: bold;
  }
  .org-info {
    font-size: 12px;
  }
  .tutor-label {
    margin-left: 70px;
  }
  .class-live-status {
    margin-top: 4rem;
  }
  .share {
    margin-top: 2.5rem;
  }
  .share-button {
    font-size: 20px;
  }
  .class-content {
    width: 100%;
    margin-top: -5px;
  }
  .class-select-tab {
    height: 60px;
    background: white;
    box-shadow:2px 2px 3px rgba(238, 48, 48, 0.07);
  }
  .chapter-menu {
    padding: 0 5%;
    line-height: 60px;
  }
  .chapter-menu-item {
    margin-right: 1.8rem;
  }
  .chapters {
    padding: 0 5%;
  }
  .class-progress {
    padding: 15px;
    width: 100%;
    min-height: 22rem;
    background: #ffffff;
    border-radius: 15px;
    box-shadow:2px 2px 3px 3px #e9e9e9;
  }
  .class-progress-title {
    margin-top: 15px;
  }
  .class-progress-previous {
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
  }
  .continue-study {
    margin-top: 15px;
    color: #ffffff;
    background: #e13d13;
    width: 100%;
    font-size: 20px;
    border-radius: 25px;
    height: 50px;
  }
  .chapter-title {
    font-size: 16px;
    font-weight: bold;
  }
  .chapter-subtitle {

  }
  .chapter-item {
    margin-top: 15px;
    height: 50px;
    width: 100%;
    line-height: 50px;
    padding: 0 8px;
  }
  .chapter a :hover {
    height: 50px;
    line-height: 50px;
    padding: 0 8px;
    color: #db2516;
    background: #fffcc8;
    border-radius: 5px;
  }
  .pay-method-border {
    float: left;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 18px;
    position: relative;
    width: 192px;
    height: 86px;
    background-color: #f3f5f7;
    border: 2px solid #f3f5f7;
    cursor: pointer;
    background-image: url(../../../assets/images/pay_s.png)
  }
  .pay-method .alipay {
    background-position: 33px -304px;
    background-repeat: no-repeat;
  }
  .pay-method .weixin {
    background-position: 30px -423px;
    background-repeat: no-repeat;
  }
  .pay-method .active {
    border: 2px solid #db2516;
  }
  .check {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    display: none;
  }
  .alipayVisible {
    display: none;
  }
  .triangle {
    width: 0;
    height: 0;
    border-bottom: 20px solid red;
    border-left: 20px solid transparent;
  }
  .icon-check {
    position: absolute;
    right: -1px;
    bottom: 0;
    color: #fff;
    font-size: 12px;
  }
.wx-pay-modal-header {
  text-align: center;
  font-size: 18px;
}
.wx-pay-modal-footer {
  text-align: center;
}
</style>
